
<section class="form-container-custom">
    <div class="row">
        <br>
        <div class="small-12 columns">
            <div class="row">
                <div class="small-12 columns">
                    <h4>ACTUALIZAR USUARIO</h4>
                    <hr>
                </div>
            </div>
        </div>
        <div class="small-12 columns">
	        <form name="forma">
				<fieldset>
					<legend><h4>Datos personales</h4></legend>
					<div class="row">
						<div class="small-12 medium-6 columns">
							<label>Nombre <small>requerido</small>
								<input type="text" 
									   name="name" 
									   ng-model="user.name"
									   maxlength="100" 
									   placeholder="Nombre"
									   required />
							</label>
							<small class="error"
								   style="margin-top: -16px"
								   ng-show="forma.name.$error.required">
								El nombre es requerido.
							</small>
						</div>
						<div class="small-12 medium-6 columns">
							<label>&nbsp;
								<input type="text" 
									   name="lastname" 
									   ng-model="user.lastname"
									   maxlength="100" 
									   placeholder="Apellidos" required />
							</label>
							<small class="error" 
								   style="margin-top: -16px"
								   ng-show="forma.lastname.$error.required">
								Los apellidos son requeridos.
							</small>
						</div>
					</div>
					<div class="row">
						<div class="small-12 medium-6 columns">
							<label>Nombre de usuario <small>requerido</small>
								<input type="text" 
									   name="username" 
									   ng-model="user.username"
									   maxlength="100" 
									   placeholder="Nombre de usuario" required />
							</label>
							<small class="error" 
								   style="margin-top: -16px"
								   ng-show="forma.username.$error.required">
								El nombre de usuario es requerido.
							</small>
						</div>
						<div class="small-12 medium-3 columns">
							<label>Contrase&ntilde;a <small>requerido</small>
								<input type="password" 
									   name="password" 
									   ng-model="user.password"
									   maxlength="100" 
									   placeholder="Contrase&ntilde;a" />
							</label>
							<small class="error" 
								   style="margin-top: -16px"
								   ng-show="forma.password.$error.required">
								Las contrase&ntilde;as deben de coincidir.
							</small>
						</div>
						<div class="small-12 medium-3 columns">
							<label>Confirma tu contrase&ntilde;a
								<input type="password" 
									   name="passwordConfirm" 
									   ng-model="user.passwordConfirm"
									   maxlength="100" 
									   placeholder="Confirmar Contrase&ntilde;a" />
							</label>
							<small class="error" 
								   style="margin-top: -16px"
								   ng-show="forma.passwordConfirm.$error.required">
								Las contrase&ntilde;as deben de coincidir.
							</small>
						</div>
					</div>
					<div class="row">
						<div class="small-12 medium-6 columns">
							<label>Fecha de Nacimiento <small>requerido</small>
								<div class="row">
									<div class="small-3 large-3 columns">
										<input type="tel" 
											   name="day"
											   ng-model="user.day"
											   placeholder="Día"
											   maxlength="2" 
											   required>
									</div>
									<div class="small-5 large-5 columns">
										<select class="expand"
												name="month"
												ng-model="user.month"
												required>
											<option value="" selected disabled>Mes</option>
											<option value="1">Enero</option>
											<option value="2">Febrero</option>
											<option value="3">Marzo</option>
										</select>
									</div>
									<div class="small-4 large-4 columns">
										<input type="tel" 
											   name="year"
											   ng-model="user.year"
											   placeholder="A&ntilde;o"
											   maxlength="4" 
											   required>
									</div>
								</div>
							</label>
							<small class="error" 
								   style="margin-top: -16px"
								   ng-show="displayErrorDOB()">
								La fecha de nacimiento es requerida.
							</small>
						</div>
						<div class="small-12 medium-3 columns">
							<label>
								Sexo <small>requerido</small>
								<select class="expand"
										name="gender"
										ng-model="user.gender"
										required>
									<option value="" selected disabled>Selecciona el Sexo</option>
									<option value="m">Hombre</option>
									<option value="f">Mujer</option>
									<option value="o">Otro</option>
								</select>
							</label>
							<small class="error" 
								   ng-show="forma.gender.$error.required">
								El sexo es requerido.
							</small>
						</div>
						<div class="small-12 medium-3 columns">
							<label>
								Ubicación <small>requerido</small>
								<select class="expand"
										name="cou_id"
										ng-model="user.cou_id"
										required>
									<option value="" selected disabled>País de residencia</option>
									<option value="1">Colombia</option>
								</select>
							</label>
							<small class="error" 
								   ng-show="forma.cou_id.$error.required">
								La ubicación es requerida.
							</small>
						</div>
					</div>
				</fieldset>
				<hr>
				<div class="row">
					<div class="small-12 medium-12 columns">
						<textarea placeholder="Notas" rows="3"></textarea>
					</div>
				</div>
			</form>
        </div>
    </div>

    <div id="bottomBar">
        <div class="row">
            <div class="small-6 large-2 columns right">
                <button type="submit" 
                    class="button tiny no-margin-custom expand" 
                    ng-click="updateUser()"
                    ng-disabled="forma.$invalid"
                    id="continueButton">Guardar</button>
            </div>
            <div class="small-6 large-2 columns right">
                <a class="button tiny secondary no-margin-custom expand" 
                	href="/#/users"
                    id="backButton">Cancelar</a>
            </div>
        </div>
    </div>
</section>